@extends('layouts.app')

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">角色列表</div>
        <div class="panel-body">
            <el-row>
                <el-button type="danger" icon="el-icon-plus" size="medium" plain @click="dialogVisible2 = true">添加角色</el-button>
            </el-row>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="角色名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="display_name"
                        label="显示名称">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="描述">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" @click="handleAllot(scope.row)">分配权限</el-button>
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="total,prev, pager, next"
                    :page-size="15"
                    :total="total">
            </el-pagination>
        </div>
    </div>

    <el-dialog
            :title="selectedRoleName"
            :visible.sync="dialogVisible"
            @open="dialogOpen"
            width="35%">
        <div style="text-align: center">
        <el-transfer
                style="text-align: left; display: inline-block"
                v-model="value4"
                filterable
                :titles="['未选择权限', '已选择权限']"
                :button-texts="['到左边', '到右边']"
                :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
                @change="handleChange"
                :data="permissionData">
            <span slot-scope="{ option }">@{{ option.key }} - @{{ option.label }}</span>
        </el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
            <el-button type="primary" @click="submitAllot">确 定</el-button>
          </span>
    </el-dialog>
    <el-dialog
            title="添加/修改角色"
            :visible.sync="dialogVisible2"
            width="30%" @close="form = {id: 0, name: '', display_name: '', description:''}">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="角色别名" prop="display_name">
                <el-input v-model="form.display_name"></el-input>
            </el-form-item>
            <el-form-item label="角色说明">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">关 闭</el-button>
    <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
  </span>
    </el-dialog>
@endsection

@section('js')
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    page: 1,
                    total: 0,
                    loading: true,
                    dialogVisible: false,
                    dialogVisible2: false,
                    selectedRoleName: '',
                    permissionData: [],
                    value4: [],
                    selectedRoleId: 0,
                    form: {
                        id: 0,
                        name: '',
                        display_name: '',
                        description: ''
                    },
                    rules: {
                        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
                        display_name: [ { required: true, message: '请输入角色别名', trigger: 'blur' } ]
                    }
                }
            },
            mounted: function () {
                this.getData()
            },
            methods: {
                handleEdit(index, row) {
                    this.form = row;
                    this.dialogVisible2 = true;
                },
                handleDelete(index, row) {
                    console.log(index, row);
                    const me = this;
                    this.$confirm('删除角色将导致分配该角色的用户失去权限,是否继续?','操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("{{action('UserController@delRole')}}",{role_id: row.id})
                            .then(function (res) {
                                console.log(res);
                                me.$message({message: res.data.i, type: res.data.status});
                                if (res.data.r === 1000){
                                    me.getData()
                                }
                            }).catch(function (err) {
                            console.log(err)
                        });
                    }).catch(() => {});
                },
                handleAllot(row) {
                    console.log(row);
                    this.dialogVisible = true;
                    this.selectedRoleName = '为 '+row.display_name+' 分配权限';
                    this.selectedRoleId = row.id;
                },
                handleChange(value, direction, movedKeys) {
                    console.log(value, direction, movedKeys);
                },
                dialogOpen () {
                    console.log('dialogOpen');
                    const me = this;
                    axios.post("{{action('UserController@permission')}}",{role_id: this.selectedRoleId})
                        .then(function (res) {
                            console.log(res);
                            if (res.data.r === 1000) {
                                me.permissionData = res.data.i;
                                me.value4 = res.data.up;
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
                onSubmit(formName) {
                    const me = this;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios.post("{{action('UserController@submitRole')}}",{form: this.form})
                                .then(function (res) {
                                    console.log(res);
                                    let type = res.data.r === 1000 ? 'success' : 'warning';
                                    me.$message({
                                        message: res.data.i,
                                        type: type
                                    });
                                    if (res.data.r === 1000) {
                                        me.getData()
                                    }
                                })
                                .catch(function (error) {
                                    console.log('error result',error);
                                })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });

                },
                submitAllot () {
                    console.log('submitAllot',this.value4);
                    const me = this;
                    axios.post("{{action('UserController@allotPermission')}}",{role_id: this.selectedRoleId,permission_id: this.value4.toString()})
                        .then(function (res) {
                            console.log(res);
                            me.$message({
                                message: res.data.i,
                                type: res.data.status
                            })
                        })
                        .catch(function (err) {
                            console.log(err)
                        })
                },
                getData: function () {
                    const me = this;
                    axios.post("{{action('UserController@role')}}", {page: this.page})
                        .then(function (res) {
                            console.log(res);
                            if (res.data.r === 1000) {
                                me.total = res.data.i.total;
                                me.tableData = res.data.i.data
                            }
                            me.loading = false
                        })
                        .catch(function (error) {
                            console.log(error);
                            me.loading = false
                        })
                }
            }
        });
    </script>
@endsection
